<template>
	<div v-if="detail">
		<NewSearchDetail v-model="visible" :title="title">
			<div class="car-popup-cont-left">
				<div class="left-top">
					<div class="left-top-row1">
						基本信息
					</div>
					<div class="left-top-row2">
						<img src="../../../../assets/new/new_car_7.png">
						<div class="left-top-row2-cont">
							<div class="left-top-row2-cont-item">
								<div>
									驱动方式：
									<span>{{detail.drivemodel || '- -'}}</span>
								</div>
								<div style="flex: 3;" :title='detail.departmentTree'>
									所属机构：
									<span>{{detail.departmentTree || '- -'}}</span>
								</div>
								<div>
									油箱容积：
									<span>{{detail.detail.fuelTank || '- -'}}升</span>
								</div>
							</div>
							<div class="left-top-row2-cont-item">
								<div>
									发动机号：
									<span>{{detail.engine || '- -'}}</span>
								</div>
								<div style="flex: 3;">
									车架号：
									<span>{{detail.carframe || '- -'}}</span>
								</div>
								<div>
									作业宽度：
									<span>{{detail.detail.workwidth || '- -'}}</span>
								</div>
							</div>
						</div>
					</div>
					<div class="left-top-row3">
						<div>
							车辆类型：
							<span>{{detail.carTypeName || '--'}}</span>
						</div>
						<div>
							车辆型号：
							<span>{{detail.carmodelname || '--'}}</span>
						</div>
						<div>
							作业类型：
							<span>{{detail.workTypeName || '- -'}}</span>
						</div>
						<div>
							车辆状态：
							<span>{{detail.status==0?'报废':'正常'}}</span>
						</div>
					</div>
				</div>
				<div class="search-detail-left">
					<div class="left-echar">
						<div class="left-echar-item" style="margin-right: 60px;">
							<Echarts width="220px" height="220px" key="speed" :options="speedOptions" ref="speedRef">
							</Echarts>
						</div>
						<div class="left-echar-item">
							<Echarts width="220px" height="220px" key="oil" :options="oilOptions" ref="oilRef">
							</Echarts>
						</div>
					</div>
					<div class="left-carimg">
						<img :src="detail.carPicture ? detail.carPicture : carImg">
					</div>
					<div class="left-btns">
						<div class="left-btns-item" @click.stop="onClickTrack">
							<Icon custom="i-icon icon-guiji" size="22" color="#eee" />
							历史轨迹
						</div>
						<!-- 0在线 1离线 2无设备 -->
						<div class="left-btns-item"
							:style="{'cursor':detail.videoonlinestatus == 0 ? 'pointer' : 'not-allowed','color':detail.videoonlinestatus == 0 ? '#eeeeee' : '#84919e'}"
							@click.stop="onClickVideo">
							<Icon custom="i-icon icon-jiankong11" size="22" />
							摄像头
						</div>
						<div class="left-btns-item" @click.stop="onClickRefuel('refuel')">
							<Icon custom="i-icon icon-guiji" size="22" color="#eee" />
							加油记录
						</div>
						<div class="left-btns-item" @click.stop="onClickRefuel('repair')">
							<Icon custom="i-icon icon-guiji" size="22" color="#eee" />
							维修记录
						</div>
					</div>
				</div>
			</div>

			<div class="car-popup-cont-right">
				<div class="search-detail-right detail-popup-right">
					

					<!-- <div class="right-cont">
            <div class="right-cont-title popup-title">
              运营数据
            </div>
            <div class="right-cont-cont">
              <div class="right-cont-cont-row1">
                <div>
                  成本总和
                  <span>
                    <span class="number">0</span>
                    元
                  </span>
                </div>
                <div>
                  行驶公里
                  <span>
                    <span class="number">14442</span>
                    公里
                  </span>
                </div>
                <div>
                  百公里油耗
                  <span>
                    <span class="number">31.61</span>
                    升
                  </span>
                  (同车型比<span>27.61升 12.56%</span>)
                </div>
              </div>
              <div class="right-cont-cont-row2">
                <div class="right-cont-cont-row2-item">
                  <div class="right-cont-cont-row2-item-top">
                    <Icon custom="i-icon icon-shuishixin"
                          size="20"
                          color="#aaa" />
                    油费
                  </div>
                  <div class="right-cont-cont-row2-item-bottom">
                    <span>0</span>元
                    <span>0次</span>
                  </div>
                </div>
                <div class="right-cont-cont-row2-item">
                  <div class="right-cont-cont-row2-item-top">
                    <Icon custom="i-icon icon-youliang1"
                          size="20"
                          color="#aaa" />
                    保养
                  </div>
                  <div class="right-cont-cont-row2-item-bottom">
                    <span>0</span>元
                    <span>0次</span>
                  </div>
                </div>
                <div class="right-cont-cont-row2-item">
                  <div class="right-cont-cont-row2-item-top">
                    <Icon custom="i-icon icon-baoxian"
                          size="20"
                          color="#aaa" />
                    保险
                  </div>
                  <div class="right-cont-cont-row2-item-bottom">
                    <span>0</span>元
                    <span>0次</span>
                  </div>
                </div>
                <div class="right-cont-cont-row2-item">
                  <div class="right-cont-cont-row2-item-top">
                    <Icon custom="i-icon icon-jianxiu"
                          size="20"
                          color="#aaa" />
                    维修
                  </div>
                  <div class="right-cont-cont-row2-item-bottom">
                    <span>0</span>元
                    <span>0次</span>
                  </div>
                </div>
              </div>
            </div>
          </div> -->

					<div class="right-bottom">
						<div class="right-bottom-box">
							<div class="border-bottom right-bottom-box-title">
								<ul>
									<li @click.stop="onClickWork(0)" :class="{'current':currentWorkIndex == 0}">作业概况
									</li>
									
									<li @click.stop="onClickWork(1)" :class="{'current':currentWorkIndex == 1}">/作业记录
									</li>
								</ul>
								<DatePicker :value="workDate" type="date" style="width: 120px"
									@on-change="onChangeWorkDate"></DatePicker>
							</div>
							<template v-if="currentWorkIndex==0">
								<div class="work-record">
									<div class="work-cont-item" v-for="(item,index) in workCaseArr" :key='index'>
										<div class="flex j-between status">
											<p class="flex-1">{{item.planName || '--'}}</p>
											<span class="unover" v-if="item.status == 0">未开始</span>
											<span class="unover" v-if="item.status == 1">进行中</span>
											<span class="unover" v-if="item.status == 2">未完成</span>
											<span class="over" v-if="item.status == 3">已完成</span>
										</div>
										<div class="flex j-between">
											<p>开始作业：{{getWorkTime(item.workStartTime) || '- -'}}</p>
											<p>结束作业：{{getWorkTime(item.workEndTime) || '- -'}}</p>
											<!-- <p>耗时：{{item.workTotalTime || '- -'}}</p> -->
										</div>
										<div class="flex j-between">
											<p class="flex-1">{{item.gridName || '--'}}</p>
											<span>{{item.shiftName}}【{{getWorkTime(item.planStartTime)}}~{{getWorkTime(item.planEndTime)}}】</span>
										</div>
										<div class="flex percent">
											<p>完成度：</p>
											<Progress class="m-r-5 m-l-5" :percent="item.finishRate" hide-info
												stroke-color="#19be6b" />
											<span>{{item.finishRate || '0'}}%</span>
										</div>
									</div>
									<div class="notData" v-if="workCaseArr.length == 0">
										<img src="../../../../assets/new/detail_no.png">
										<p>暂无数据</p>
									</div>
								</div>
							</template>
							<template v-if="currentWorkIndex == 1">
								<div class="work-case">
									<div class="notData" v-if="workRecordArr.length == 0">
										<img src="../../../../assets/new/detail_no.png">
										<p>暂无数据</p>
									</div>
									<div class="work-case-item" v-for="(item,index) in workRecordArr" :key='index'>
										<ul>
											<li>
												<label>作业对象：</label>
												<span>{{item.gridName || '- -'}}</span>
											</li>
											<li v-if="item.jobType">
												<label>作业类型：</label>
												<span>{{item.jobType}}</span>
											</li>
											<li>
												<label>提交时间：</label>
												<span>{{getWorkTime(item.createTime)}}</span>
											</li>
											<li>
												<label>完成情况：</label>
												<span>{{item.content}}</span>
											</li>
										</ul>
										<div class="multimedia">
											<div class="item video-item" v-previewVideo="item.videourl"
												v-if="item.videourl">
												<Icon custom="i-icon icon-bofang" size="25" color='#fff'></Icon>
											</div>
											<div class="item" v-for="(items,indexs) in item.imgurls" :key="indexs">
												<el-image :src="items" fit="cover" :preview-src-list="[items]"
													class="detail-top-img" v-if="item.imgurls.length != 0">
												</el-image>
											</div>
										</div>
									</div>
								</div>
							</template>
						</div>
						<div class="calendar-box right-bottom-box right-rili">
							<div class="calendar-title border-bottom">
								<div @click.stop="onClickCalendarTab(0)" :class="{'current':currentCalendarIndex == 0}">
									作业日历</div>
								<div @click.stop="onClickCalendarTab(1)" :class="{'current':currentCalendarIndex == 1}">
									异常日历</div>
							</div>
							<div class="work-calendar">
								<div class="calendar" v-show="currentCalendarIndex == 0">
									<el-calendar v-model="workCalendar">
										<template slot="dateCell" slot-scope="{date, data}">
											<!-- 非当月 -->
											<div v-if="data.type != 'current-month'" @click.stop>
											</div>
											<!-- 当月 -->
											<div v-else class="cont"
												:class="{'day-after':isBeyondDate(data.day),'success':getWorkCalendarDate(data.day)}">
												<p>
													{{ data.day.split('-')[2]}}
												</p>
												<div class="cont-status"
													v-if="getWorkCalendarDate(data.day) && getViolationCalendarDate(data.day)">
													<span class="err"></span>
												</div>
											</div>
										</template>
									</el-calendar>
								</div>
							</div>
							<div class="violation-calendar">
								<div class="calendar" v-show="currentCalendarIndex == 1">
									<el-calendar v-model="violationCalendar">
										<template slot="dateCell" slot-scope="{date, data}">
											<!-- 当月 -->
											<div v-if="data.type != 'current-month'" @click.stop>
											</div>
											<div v-else class="cont"
												:class="{'day-after':isBeyondDate(data.day),'cursor-pointer':getViolationCalendarDate(data.day),'success':getWorkCalendarDate(data.day) && getViolationCalendarDate(data.day)}"
												@click.stop="onClickCalendar(data.day)">
												<p>
													{{ data.day.split('-')[2]}}
												</p>
												<div class="cont-status" v-if="getViolationCalendarDate(data.day)">
													<span class="err"></span>
												</div>
												<div class="case" :class="{'case-left':classType}" v-if="calendarCaseVisible&&data.day==violationModalDate">
													<div class="title flex a-center j-between">
														{{violationModalDate}}
														<Icon custom="i-icon icon-guanbi cursor-pointer" size="16"
															@click.stop="calendarCaseVisible = false" />
													</div>
													<div class="cont">
														<div class="item" v-for="(item,index) in violationModalData" :key="index">
															<p style="flex: 1;background: rgba(0,0,0,0);">{{item.alarmTypeName || '- -'}}</p>
															<span>{{item.number}}次</span>
														</div>
													</div>
												</div>
											</div>
										</template>
									</el-calendar>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</NewSearchDetail>

		<Modal v-model="refuelVisible" footer-hide width="1044">
			<div class="refuel">
				<div class="refuel-top">
					{{modalTitle}}
				</div>
				<div class="refuel-title">
					<div class="refuel-title-left">
						<span>加油日期</span>
						<DatePicker type="date" placeholder="开始时间" style="width: 120px"></DatePicker>
						<span>-</span>
						<DatePicker type="date" placeholder="结束时间" style="width: 120px"></DatePicker>
					</div>
					<div class="refuel-title-right">
						<div class="show" @click.stop="getList">查询</div>
						<div>重置</div>
					</div>
				</div>
				<img src="../../../../assets/new/detail_no.png" class="refuel-img" v-if="data.length == 0">
				<Table :columns="getColumns" :data="data" :loading="tableLoading" height="600"></Table>
			</div>
		</Modal>
	</div>
</template>

<script>
	import bus from '@/utils/bus'
	import NewSearchDetail from "./NewSearchDetail.vue"
	import Echarts from '../../../common/Echarts'
	import {
		formatDate
	} from '@/utils/dateRangUtil';
	export default {
		components: {
			NewSearchDetail,
			Echarts
		},
		data() {
			return {
				carImg: require('../../../../assets/main/car.png'),
				row: {
					videoUrl: 'https://hssfile.oss-cn-beijing.aliyuncs.com/file/wx_camera_1623298771160.mp4'
				},
				visible: false,
				dataId: '',
				title: '',
				detail: {
					detail: {}
				},
				detailCarCalendarIndex: 0,
				refuelVisible: false,
				modalTitle: '',
				data: [],
				tableLoading: false,
				columnsRefuel: [{
						title: '车牌号',
						// key: 'carnumber',
						minWidth: 60,
						tooltip: true,
						align: 'center',
					},
					{
						title: '所属机构',
						// key: 'deptidforcar',
						minWidth: 60,
						tooltip: true,
						align: 'center',
					},
					{
						title: '油卡编号',
						key: 'oilcardnum',
						minWidth: 60,
						tooltip: true,
						align: 'center',
					},
					{
						title: '加油量',
						key: 'oilnum',
						minWidth: 60,
						tooltip: true,
						align: 'center',
					},
					{
						title: '费用(元)',
						key: 'totalcost',
						minWidth: 60,
						tooltip: true,
						align: 'center',
					},
					{
						title: '服务商',
						key: 'servicevendorname',
						minWidth: 60,
						tooltip: true,
						align: 'center',
					},
					{
						title: '地址',
						key: 'place',
						minWidth: 60,
						tooltip: true,
						align: 'center',
					},
					{
						title: '加油时间',
						key: 'costtime',
						minWidth: 60,
						tooltip: true,
						align: 'center',
					},
				],
				columnsRepair: [{
						title: '车牌号',
						// key: 'carnumber',
						minWidth: 60,
						tooltip: true,
						align: 'center',
					},
					{
						title: '所属机构',
						// key: 'carnumber',
						minWidth: 60,
						tooltip: true,
						align: 'center',
					},
					{
						title: '维修单号',
						key: 'orderNo',
						minWidth: 60,
						tooltip: true,
						align: 'center',
					},
					{
						title: '车辆类型',
						// key: 'carnumber',
						minWidth: 60,
						tooltip: true,
						align: 'center',
					},
					{
						title: '费用(元)',
						key: 'totalcost',
						minWidth: 60,
						tooltip: true,
						align: 'center',
					},
					{
						title: '服务商',
						key: 'servicevendorname',
						minWidth: 60,
						tooltip: true,
						align: 'center',
					},
					{
						title: '地址',
						key: 'place',
						minWidth: 60,
						tooltip: true,
						align: 'center',
					},
					{
						title: '加油时间',
						key: 'costtime',
						minWidth: 60,
						tooltip: true,
						align: 'center',
					}
				],
				speedOptions: {
					series: [{
						type: 'gauge',
						max: 140,
						splitNumber: 5,
						// 展示当前进度
						progress: {
							show: true,
							width: 18
						},
						// 轴线样式
						axisLine: {
							lineStyle: {
								width: 3,
								color: [
									[1, '#3880B3']
								]
							}
						},
						// 刻度样式
						axisTick: {
							show: true,
							lineStyle: {
								width: 2,
								color: '#3880B3'
							}
						},
						// 分割线样式
						splitLine: {
							length: 14,
							lineStyle: {
								width: 2,
								color: '#999'
							}
						},
						// 刻度标签
						axisLabel: {
							distance: 5,
							color: '#B9BBBE',
							fontSize: 14
						},
						// 指针固定点
						anchor: {
							show: true,
							showAbove: true,
							size: 25,
							itemStyle: {
								borderWidth: 10
							}
						},
						title: {
							show: true,
							offsetCenter: [0, '100%'],
							fontSize: 15,
							color: '#fff',
						},
						// 仪表盘详情
						detail: {
							valueAnimation: true,
							fontSize: 30,
							color: '#3880B3',
							offsetCenter: ['0', '70%']
						},
						data: [{
							value: 0,
							name: '车速'
						}],
						pointer: {
							width: 3,
							itemStyle: {
								color: '#fff',
								borderColor: '#fff'
							}
						}
					}]
				},
				oilOptions: {
					series: [{
						type: 'gauge',
						max: 420,
						splitNumber: 5,
						// 展示当前进度
						progress: {
							show: true,
							width: 18
						},
						// 轴线样式
						axisLine: {
							lineStyle: {
								width: 3,
								color: [
									[1, '#3880B3']
								]
							}
						},
						// 刻度样式
						axisTick: {
							show: true,
							lineStyle: {
								width: 2,
								color: '#3880B3'
							}
						},
						// 分割线样式
						splitLine: {
							length: 14,
							lineStyle: {
								width: 2,
								color: '#999'
							}
						},
						// 刻度标签
						axisLabel: {
							distance: 5,
							color: '#B9BBBE',
							fontSize: 14
						},
						// 指针固定点
						anchor: {
							show: true,
							showAbove: true,
							size: 25,
							itemStyle: {
								borderWidth: 10
							}
						},
						title: {
							show: true,
							offsetCenter: [0, '100%'],
							fontSize: 15,
							color: '#fff',
						},
						// 仪表盘详情
						detail: {
							valueAnimation: true,
							fontSize: 30,
							color: '#3880B3',
							offsetCenter: [0, '70%']
						},
						data: [{
							value: 0,
							name: '油量'
						}],
						pointer: {
							width: 3,
							itemStyle: {
								color: '#fff',
								borderColor: '#fff'
							}
						}
					}]
				},
				currentWorkIndex: 0, // 作业概况，作业记录 tab
				currentCalendarIndex: 0, // 作业日历，异常日历 tab
				workDate: '', // 作业概况，作业记录的日期选择器
				workCaseArr: [], // 作业概况
				workRecordArr: [], // 作业记录
				workMonth: '', // 作业日历的月份
				workCalendar: new Date(), // 作业日历 日历组件
				violationCalendar: new Date(), // 异常日历 日历组件
				violationDate: '', // 违规日历的月份
				calendarCaseVisible: false, // 违规日历弹框
				workCalendarArr: [], // 作业日历
				violationArr: [], // 异常日历 报警违规数组
				violationModalData: [], // 点击异常日历弹框时的数据
				violationModalDate: '', // 点击异常日历弹框时的日历
				classType:false
			}
		},
		watch: {
			dataId(newVal) {
				if (newVal) {
					this.getDetail()
					this.getWorkList()
					this.getWorkCalendarList()
					this.getViolationCalendarList()
					this.getCarOikOrSpeed()
				}
			},
			visible(newVal) {
				if (!newVal) {
					this.currentWorkIndex = 0
					this.currentCalendarIndex = 0
					this.dataId = ''
					this.workCalendar = new Date()
					this.violationCalendar = new Date()
					this.calendarCaseVisible = false
					this.timeInit()
				}
			},
			calendarCaseVisible(newVal) {
				if (!newVal) {
					this.violationModalDate = ''
					this.violationModalData = []
				}
			}
		},
		computed: {
			getColumns() {
				let columns = []
				switch (this.modalTitle) {
					case '加油记录':
						columns = this.columnsRefuel
						break;
					case '维修记录':
						columns = this.columnsRepair
						break;
					default:
						break;
				}
				return columns
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				bus.$on('showMainSearchCarDetail', data => {
					this.dataId = data.id
					this.title = data.title
					// this.speedOptions.series[0].data[0].value = data.speed || 0
					// this.$refs.speedRef.init()
					this.visible = true
				})
				this.timeInit()
				// 作业日历组件上个月添加点击事件
				this.$nextTick(() => {
					// 点击前一个月
					let prevBtn = document.querySelector(
						'.work-calendar .el-calendar__button-group .el-button-group>button:nth-child(1)');
					prevBtn.addEventListener('click', () => {
						this.onClickWorkMonthList()
					})
				})
				// 作业日历组件下个月添加点击事件
				this.$nextTick(() => {
					// 点击后一个月
					let prevBtn = document.querySelector(
						'.work-calendar .el-calendar__button-group .el-button-group>button:last-child');
					prevBtn.addEventListener('click', () => {
						this.onClickWorkMonthList()
					})
				})
				// 违规日历组件上个月添加点击事件
				this.$nextTick(() => {
					// 点击前一个月
					let prevBtn = document.querySelector(
						'.violation-calendar .el-calendar__button-group .el-button-group>button:nth-child(1)');
					prevBtn.addEventListener('click', () => {
						this.onClickViolationMonthList()
					})
				})
				// 违规日历组件下个月添加点击事件
				this.$nextTick(() => {
					// 点击后一个月
					let prevBtn = document.querySelector(
						'.violation-calendar .el-calendar__button-group .el-button-group>button:last-child');
					prevBtn.addEventListener('click', () => {
						this.onClickViolationMonthList()
					})
				})
			},
			getDetail() {
				this.$store.dispatch('getCarDetail', this.dataId).then(res => {
					this.detail = res
					console.log(res);
					// 使用详情接口返回的绑定账号的id
					if (this.detail.bindaccount) {
						this.getWorkRecordList(this.detail.bindaccount)
					}
				})
			},
			// 获取作业概况
			getWorkList() {
				let params = {
					carId: this.dataId,
					workDate: this.workDate
				}
				this.$http.getMapCarWorkList(params).then((res) => {
					if (res.code === 200) {
						this.workCaseArr = res.result.list
						this.workCaseArr.forEach(item => {
							let time = this.$timeDifference(item.workStartTime, item.workEndTime)
							if (isNaN(time[0]) && isNaN(time[1])) {
								item.workTotalTime = ''
							} else {
								item.workTotalTime = time[0] > 0 ? time[0] + '小时' + time[1] + '分钟' : time[
									1] + '分钟'
							}
						})
					}
				})
			},
			// 获取作业记录
			getWorkRecordList(id) {
				let params = {
					pageNum: 1,
					pageSize: 99999,
					uId: id,
					nowtime: this.workDate,
				}
				this.$http.getMapWorkRecordList(params).then(res => {
					if (res.code == 200) {
						this.workRecordArr = res.result.result.rows.map(item => {
							if (item.imgurls) {
								item.imgurls = item.imgurls.split(',').filter(items => items)
							}
							return item
						})
					}
				})
			},
			// 获取作业日历
			getWorkCalendarList() {
				let params = {
					carId: this.dataId,
					workMonth: this.workMonth
				}
				this.$http.getMapCarWorkList(params).then((res) => {
					if (res.code === 200) {
						this.workCalendarArr = res.result.list
					}
				})
			},
			// 获取违规日历
			getViolationCalendarList() {
				let params = {
					carId: this.dataId,
					starttime: this.violationDate,
				}
				this.$http.getMapCarViolationList(params).then((res) => {
					if (res.code === 200) {
						let data = res.result
						this.violationArr = data
					}
				})
			},
			// 获取油量 速度图表
			getCarOikOrSpeed() {
				this.$http.getMapCarOikOrSpeed({
					carId: this.dataId
				}).then((res) => {
					this.speedOptions.series[0].data[0].value = parseInt(res.result.speed)
					this.$refs.speedRef.init()
					this.oilOptions.series[0].data[0].value = parseInt(res.result.oilMass)
					this.$refs.oilRef.init()
				})
			},
			timeInit() {
				let time = formatDate(new Date())
				let timeArr = time.split('-')
				this.workDate = time
				this.workMonth = timeArr[0] + '-' + timeArr[1]
				this.violationDate = timeArr[0] + '-' + timeArr[1]
			},
			// 作业日历点击上月下月触发
			onClickWorkMonthList() {
				let timeArr = formatDate(this.workCalendar).split('-')
				this.workMonth = timeArr[0] + '-' + timeArr[1]
				this.getWorkCalendarList()
			},
			// 违规日历点击上月下月触发
			onClickViolationMonthList() {
				let timeArr = formatDate(this.violationCalendar).split('-')
				this.violationDate = timeArr[0] + '-' + timeArr[1]
				this.getViolationCalendarList()
			},
			// 作业概况 作业记录切换
			onClickWork(i) {
				this.workDate = formatDate(new Date())
				this.currentWorkIndex = i
			},
			// 作业日历 异常日历切换
			onClickCalendarTab(i) {
				this.currentCalendarIndex = i
			},
			// 作业记录 作业概况选择日期
			onChangeWorkDate(date) {
				this.workDate = date
				if (this.currentWorkIndex == 0) {
					this.getWorkList()
				} else {
					// 使用详情接口返回的绑定账号的id
					if (this.detail.bindaccount) {
						this.getWorkRecordList(this.detail.bindaccount)
					}
				}
			},
			// 作业概况时间 去掉年月日
			getWorkTime(time) {
				if (time) {
					let arr = time.split(' ')
					return arr[1]
				} else {
					return ''
				}
			},
			// 点击违规日历某一天
			onClickCalendar(date,e) {
				if(new Date(date).getDay()===0){
					this.classType = true
				}else{
					this.classType = false
				}
				if (!this.getViolationCalendarDate(date)) return
				// 违规数组中日期 = 点击的日期
				let arr = []
				this.violationArr.forEach(item => {
					if (item.alarmTime == date) {
						arr.push(item)
					}
				})
				this.violationModalData = arr
				this.violationModalDate = date
				this.calendarCaseVisible = true
			},
			// 是否超出日期
			isBeyondDate(date) {
				return formatDate(new Date()) < date
			},
			// 某天是否有排班
			getWorkCalendarDate(date) {
				return this.workCalendarArr.find(item => item.workDate.split(' ')[0] == date)
			},
			// 某天是否有异常
			getViolationCalendarDate(date) {
				return this.violationArr.find(item => item.alarmTime == date)
			},
			// 加油记录 / 维修记录
			onClickRefuel(value) {
				if (value == 'refuel') {
					this.modalTitle = '加油记录'
				} else {
					this.modalTitle = '维修记录'
				}
				this.getList()
				this.refuelVisible = true
			},
			getList() {
				// return
				switch (this.modalTitle) {
					case '加油记录':
						this.getRefuelList()
						break;
					case '维修记录':
						this.getRepairList()
						break;
					default:
						break;
				}
			},
			// 获取加油记录列表
			getRefuelList() {
				let params = {
					deptIdForCar: "",
					carNumid: this.dataId,
					serviceVendorName: "",
					oilCardNum: '',
					page: 1,
					size: 10
				}
				this.tableLoading = true
				this.$http.getCarRefuelList(params).then((res) => {
					this.data = res.result.oillist
					this.tableLoading = false
				}).catch((err) => {
					this.tableLoading = false
				})
			},
			// 获取维修记录列表
			getRepairList() {
				let params = {
					deptIdForCar: "",
					carNumid: this.dataId,
					serviceVendorName: "",
					orderNo: '',
					page: 1,
					size: 10
				}
				this.tableLoading = true
				this.$http.getCarRepairList(params).then((res) => {
					this.data = res.result.reapairlist
					this.tableLoading = false
				}).catch((err) => {
					this.tableLoading = false
				})
			},
			// 摄像头
			onClickVideo() {
				if (this.detail.videoonlinestatus == 0) {
					let params = {
						equipcode: this.detail.equipcode,
						eqptype: this.detail.eqptype,
						details: this.detail.channels,
					}
					bus.$emit('showPlayVideoModal', params)
				}
			},
			// 轨迹
			onClickTrack() {
				const {
					href
				} = this.$router.resolve({
					name: 'newTrack',
					query: {
						type: 'car',
						id: this.detail.id,
						carType: this.detail.carTypeName,
						name: this.detail.plateNumber,
            time: Date.now()
					}
				})
				// const {
				// 	href
				// } = this.$router.resolve({
				// 	name: 'track',
				// 	query: {
				// 		type: 'car',
				// 		id: this.detail.id,
				// 		carType: this.detail.carTypeName,
				// 		name: this.detail.plateNumber
				// 	}
				// })
				window.open(href, '_blank')
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/scss/iviewCssReset/input";
	@import "@/scss/iviewCssReset/modal";
	@import "@/scss/iviewCssReset/elCalendar";
	@import "@/scss/iviewCssReset/table";
	@import "@/scss/iviewCssReset/datePicker";
	@import "@/scss/iviewCssReset/progress";

	::v-deep {
		.ivu-table {
			background-color: rgba(0,0,0,0);
			.ivu-table-header {
				tr {
					th {
						border-bottom-color: #3e434a;
					}
				}
			}
		}
		.ivu-table td {
		    background-color: rgba(0,0,0,0);
		    color: #ccc;
		    border-bottom: 1px solid rgba(0,0,0,0);
		    border-right: 1px solid rgba(0,0,0,0);
			padding-top: 160px;
			span{
				font-size: 18px;
			}
		}
		.ivu-table:before {
		    background-color: rgba(0,0,0,0);
		}
		.ivu-modal-close .ivu-icon-ios-close:hover {
		    color: #999;
		}
	}

	.car-popup-cont-left {
		margin-right: 10px;
	}

	.car-popup-cont-right {
		
	}

	/* 车辆左 */
	.search-detail-left {
		width: 746px;
		height: 570px;
		background: url(../../../../assets/new/detail_712.png) 0 0 no-repeat;
		background-size: 100% 100%;
		overflow: hidden;
		margin-top: 10px;
		.left-echar {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 20px;

			.left-echar-item {}
		}

		.left-carimg {
			display: flex;
			justify-content: center;
			margin: 10px auto 30px;
			padding: 0 30px;
			width: 100%;

			img {
				max-width: 680px;
				// width: 340px;
				height: 200px;
			}
		}

		.left-btns {
			width: 746px;
			display: flex;
			justify-content: center;
			margin: auto;

			.left-btns-item {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 120px;
				height: 45px;
				font-size: 14px;
				font-weight: 500;
				background: rgba(30, 176, 252, 0.35);
				border: 1px solid #1EB0FC;
				border-radius: 4px;
				color: #FFFFFF;
				cursor: pointer;
				margin-right: 30px;
			}
			.left-btns-item:last-child{
				margin-right: 0;
			}
		}
	}

	.search-detail-right {
		.right-top {
			border: 1px solid rgba(255, 255, 255, 0.1);

			.right-top-row1 {
				height: 51px;
				line-height: 51px;
				color: #eee;
				font-size: 20px;
				padding-left: 20px;

				div {
					margin-right: 20px;
					cursor: pointer;
				}
			}

			.right-top-row::after {
				content: "";
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 1px;
				box-sizing: border-box;
				border-left: 3px solid #fff;
				border-right: 3px solid #fff;
				background: rgba(255, 255, 255, 0.1);
			}

			.right-top-row2 {
				display: flex;
				padding: 20px 16px;

				img {
					width: 62px;
					height: 62px;
					border-radius: 62px;
					margin-right: 30px;
					cursor: default;
				}

				.right-top-row2-cont {
					box-sizing: border-box;
					flex: 1;

					.right-top-row2-cont-item {
						display: flex;

						div {
							width: 33%;
							color: rgba(255, 255, 255, 0.5);

							span {
								color: #eee;
							}
						}
					}

					.right-top-row2-cont-item:first-child {
						margin-bottom: 16px;
					}
				}
			}

			.right-top-row3 {
				display: flex;
				height: 32px;
				line-height: 32px;
				padding: 0 16px;
				background: rgba(255, 255, 255, 0.1);

				div {
					width: 33%;
					color: rgba(255, 255, 255, 0.5);

					span {
						color: #eee;
					}
				}
			}
		}

		.right-cont {
			margin-top: 10px;
			border: 1px solid rgba(255, 255, 255, 0.1);

			.right-cont-title {
				position: relative;
			}

			.right-cont-cont {
				padding: 16px 26px;

				.right-cont-cont-row1 {
					display: flex;
					justify-content: space-between;

					div {
						color: rgba(255, 255, 255, 0.5);
						font-size: 14px;
						margin-right: 20px;

						span {
							color: #1EB0FC;

							.number {
								font-size: 24px;
							}
						}
					}
				}

				.right-cont-cont-row2 {
					display: flex;
					margin-top: 16px;
					justify-content: space-between;

					.right-cont-cont-row2-item {
						.right-cont-cont-row2-item-top {
							color: #eee;
						}

						.right-cont-cont-row2-item-bottom {
							color: rgba(255, 255, 255, 0.7);
							padding-top: 5px;

							span:first-child {
								font-size: 24px;
								color: #eee;
							}

							span:last-child {
								display: inline-block;
								padding: 2px 8px;
								background-color: rgba(13, 128, 235, 0.5);
								color: #eee;
								border-radius: 9px;
								margin-left: 8px;
								line-height: 1;
							}
						}
					}
				}
			}
		}

		.right-bottom {
			

			// 右下角盒子
			.right-bottom-box {
				width: 454px;
				height: 390px;
				background: url(../../../../assets/new/detail_466.png) 0 0 no-repeat;
				background-size: 100% 100%;
				overflow: hidden;

				// 标题
				.right-bottom-box-title {
					width: 426px;
					height: 46px;
					background: url(../../../../assets/new/detail_nav_426.png) 0 0 no-repeat;
					background-size: 100% 100%;
					display: flex;
					justify-content: space-between;
					padding: 0 100px 0 20px;
					align-items: center;
					margin: 17px 0 0 14px;

					ul {
						width: 140px;
						display: flex;
						align-items: center;

						li {
							flex: 1;
							font-size: 16px;
							color: #fff;
							font-weight: bold;
							cursor: pointer;
						}

						.current {
							color: #1EB0FC;
						}
					}
				}
			}

			.right-rili{
				width: 454px;
				height: 400px;
				background: url(../../../../assets/new/detail_483.png) 0 0 no-repeat;
				background-size: 100% 100%;
				margin-top: 10px;
			}
			.work-case::-webkit-scrollbar{
				width: 5px;
			}
			.work-case::-webkit-scrollbar-thumb{
				background-color: #CCCCCC;
			}
			// 作业概况
			.work-case {
				height: 435px;
				padding: 20px;
				overflow-y: auto;
				color: #ffffff;
				font-size: 14px;

				.work-case-item {
					margin-bottom: 10px;

					ul {
						li {
							margin-bottom: 10px;
						}
					}

					.multimedia {
						display: flex;
						flex-wrap: wrap;

						.item {
							width: 32%;
							margin-right: 2%;

							img {
								width: 100%;
							}
						}

						.item:nth-child(3n) {
							margin-right: 0;
						}

						.video-item {
							position: relative;
							background: #797979;

							i {
								position: absolute;
								left: 50%;
								top: 50%;
								transform: translate(-50%, -50%);
							}
						}
					}
				}
			}
			.work-record::-webkit-scrollbar{
				width: 5px;
			}
			.work-record::-webkit-scrollbar-thumb{
				background-color: #CCCCCC;
			}
			// 作业记录
			.work-record {
				height: 310px;
				// max-height: 280px;
				padding: 20px 10px 20px 20px;
				margin-right: 10px;
				overflow-y: auto;
				color: #ffffff;
				font-size: 14px;

				.work-cont-item {
					margin-bottom: 30px;

					div {
						margin-bottom: 10px;
					}

					.status {
						span {
							width: 54px;
							height: 22px;
							text-align: center;
							border-radius: 4px;
							padding: 0 4px;
						}

						.over {
							color: #1EB0FC;
							background: #d6f1 ea;
							border: 1px solid #1EB0FC;
						}

						.unover {
							color: #f68315;
							background: #fcdfc6;
							border: 1px solid #f68315;
						}
					}

					.percent {
						p {
							min-width: 60px;
						}
					}
				}

				.work-cont-item:last-child {
					margin-bottom: 0;
				}
			}

			// 日历
			.calendar-box {
				overflow: hidden;
				.calendar-title {
					width: 366px;
					height: 51px;
					background: url(../../../../assets/new/detail_nav_366.png) 0 0 no-repeat;
					background-size: 100% 100%;
					line-height: 1;
					color: #fff;
					font-size: 16px;
					font-weight: bold;
					padding-left: 20px;
					margin: 17px 0 0 14px;
					display: flex;
					align-items: center;

					div {
						margin-right: 20px;
						cursor: pointer;
					}

					.current {
						color: #1EB0FC;
						position: relative;
					}

					// .current::after {
					//   content: "";
					//   position: absolute;
					//   bottom: 8px;
					//   left: 50%;
					//   transform: translateX(-50%);
					//   width: 0;
					//   height: 0;
					//   border-left: 5px solid transparent;
					//   border-right: 5px solid transparent;
					//   border-bottom: 4px solid #1EB0FC;
					// }
				}

				// .calendar-title::after {
				// 	content: "";
				// 	position: absolute;
				// 	left: 0;
				// 	bottom: 0;
				// 	width: 100%;
				// 	height: 1px;
				// 	box-sizing: border-box;
				// 	border-left: 3px solid #fff;
				// 	border-right: 3px solid #fff;
				// 	background: rgba(255, 255, 255, 0.1);
				// }
			}

			// 作业日历
			.work-calendar {

				// 日历组件
				.calendar {
					.cont {
						.cont-status {

							// .success {
							//   display: inline-block;
							//   width: 8px;
							//   height: 8px;
							//   border-radius: 8px;
							//   text-align: center;
							//   background: rgba(255, 255, 255, 0.4);
							// }
							.err {
								display: inline-block;
								width: 8px;
								height: 8px;
								border-radius: 8px;
								text-align: center;
								background: #eb6100;
							}
						}
					}

					.success {
						color: #fff;

						p {
							background: #1EB0FC;
						}
					}
				}
			}

			// 异常日历
			.violation-calendar {
				position: relative;

				// 日历组件
				.calendar {
					.cont {
						position: relative;
						.cont-status {
							.err {
								display: inline-block;
								width: 8px;
								height: 8px;
								border-radius: 8px;
								text-align: center;
								background: #eb6100;
							}
						}
					}

					.success {
						color: #fff;

						p {
							background: #1EB0FC;
						}
					}
				}

				.case {
					min-width: 140px;
					border-radius: 2px;
					color: #ffffff;
					background-image: url(../../../../assets/new/car_rili_bgc.png);
					background-size: 100% 100%;
					position: absolute;
					// top: 50%;
					// left: 50%;
					// transform: translate(-50%, -50%);
					left: 0;
					top: -20px;
					z-index: 999999;

					.title {
						height: 24px;
						font-size: 14px;
						padding: 2px 12px;
						border-bottom: 1px solid #00BAFF;
						// background: #1b1b1b;
					}

					.cont {
						font-size: 14px !important;
						padding: 0 12px;
						// background: #121212;

						.item {
							padding-bottom: 0;
							display: flex;
							justify-content: space-between;
							p{
								height: 20px;
								line-height: 20px;
							}

							span {
								margin-left: 10px;
								color: #eb6100;
							}
						}

						.item:nth-child(1) {
							padding-top: 2px;
							margin-top: -1px;
						}
					}
				}
				.case-left{
					left: -80px;
				}
			}
		}
	}

	.detail-popup-right {

		/* 详情公共样式 stard */
		.border-bottom {
			position: relative;
		}

		// .border-bottom::after {
		// 	content: "";
		// 	position: absolute;
		// 	left: 0;
		// 	bottom: 0;
		// 	width: 100%;
		// 	height: 1px;
		// 	box-sizing: border-box;
		// 	border-left: 3px solid #fff;
		// 	border-right: 3px solid #fff;
		// 	background: rgba(255, 255, 255, 0.1);
		// }

		/* 详情公共样式 end */
	}

	::v-deep {
		.ivu-modal-body {
			padding: 0;
		}

		.ivu-input {
			background: #282b2f;
		}
	}

	.refuel {
		width: 1044px;
		height: 755px;
		background: url(../../../../assets/new/detail_755.png) 0 0 no-repeat;
		background-size: 100% 100%;
		overflow: hidden;
		position: absolute;
		
		.refuel-img{
			width: 220px;
			height: 220px;
			position: absolute;
			top: 40%;
			left: 50%;
			margin-left: -110px;
		}
		.refuel-top{
			width: 306px;
			height: 46px;
			font-size: 16px;
			color: #1EB0FC;
			font-weight: 500;
			background: url(../../../../assets/new/detail_nav_306.png) 0 0 no-repeat;
			background-size: 100% 100%;
			margin: 22px 0 0 14px;
			padding-left: 20px;
			display: flex;
			align-items: center;
		}
		::v-deep{
			.ivu-date-picker-rel .ivu-input {
			    // width: 160px;
			    // height: 42px;
			    background: #141F3B;
			    border: 1px solid #20BCFC;
			}
			.ivu-table {
			    background-color: rgba(0,0,0,0);
			}
			.ivu-table td{
				background-color: rgba(0,0,0,0);
			}
			.ivu-table .ivu-table-header th {
				border: none;
			    background-color: rgba(0,0,0,0);
			}
			thead{
				width: 1041px;
				height: 62px;
				background: url(../../../../assets/new/detail_line.png) 0 0 no-repeat;
				background-size: 100% 100%;
			}
			.ivu-table-cell{
				font-size: 16px;
				color: #FFFFFF;
			}
		}
		.refuel-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 54px;
			padding: 0 44px 0 44px;

			.refuel-title-left {
				display: flex;
				align-items: center;

				span {
					margin-right: 12px;
					margin-left: 12px;
					color: rgba(255, 255, 255, 0.65);
				}
			}

			.refuel-title-right {
				display: flex;

				div {
					width: 56px;
					height: 28px;
					color: #FFFFFF;
					border-radius: 4px;
					text-align: center;
					line-height: 28px;
					cursor: pointer;
					background: rgba(30, 176, 252, 0.35);
					border: 1px solid #1EB0FC;
				}

				.show {
					// background: #1EB0FC;
					// color: #fff;
					// border: 1px solid #1EB0FC;
					margin-right: 8px;
				}
			}
		}

		.refuel-list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 36px;
			color: #fff;
			font-weight: 500;
			padding: 0 44px 0 44px;
		}

		.noData {
			padding: 150px 0;
		}
	}
	.left-top{
		width: 746px;
		height: 220px;
		background: url(../../../../assets/new/trash.png) 0 0 no-repeat;
		background-size: 100% 100%;
		padding-top: 14px;
		.left-top-row1{
			width: 206px;
			height: 46px;
			background: url(../../../../assets/new/detail_nav_206.png) 0 0 no-repeat;
			background-size: 100% 100%;
			font-size: 16px;
			color: #23CEFD;
			font-weight: bold;
			line-height: 46px;
			padding-left: 20px;
			margin-left: 11px;
		}
		.left-top-row2{
			height: 100px;
			display: flex;
			align-items: center;
			padding-left: 30px;
			img{
				width: 60px;
				height: 60px;
				margin-right: 20px;
			}
			.left-top-row2-cont{
				flex: 1;
				height: 60px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.left-top-row2-cont-item{
					font-size: 14px;
					color: #999999;
					font-weight: 500;
					display: flex;
					align-items: center;
					div{
						flex: 2;
						span{
							color: #FFFFFF;
						}
					}
				}
			}
		}
		.left-top-row3{
			height: 56px;
			font-size: 16px;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30px;
		}
	}
	.notData{
		font-size: 16px;
		text-align: center;
		margin-top: 30px;
		img{
			width: 160px;
			height: 160px;
		}
	}
	::v-deep{
		.ivu-date-picker-rel .ivu-input {
		    color: #c5c8ce;
		    background-color: rgba(0,0,0,0);
		    border: 1px solid rgba(0,0,0,0);
		}
		.ivu-modal-content {
		    box-shadow: 0 0 5px 0 rgba(37,187 ,150 ,0);
		    background: rgba(26, 26, 26, 0);
		}
		.ivu-modal-close{
			top: 20px;
			right: 20px;
		}
		.ivu-date-picker-rel .ivu-icon {
		    color: rgba(30, 176, 252,1);
		}
		.el-calendar__header {
		    padding: 4px 20px;
		}
		.el-calendar .el-calendar__body .el-calendar-table__row td .el-calendar-day {
		    height: 42px;
		}
		.el-calendar-table thead th {
		    padding: 8px 0;
		}
		.el-calendar .el-calendar__body .el-calendar-table__row td .el-calendar-day .cont p {
		    width: 26px;
		    height: 26px;
		    line-height: 26px;
		}
		.el-calendar .el-calendar__body .el-calendar-table__row td .el-calendar-day .cont .cont-status {
		    line-height: 16px;
		}
	}
</style>
